<template>
  <div class="helperUpload">
    <van-nav-bar
      title="近聘助手配置上传"
      left-arrow
      @click-left="$router.push('/mine')"
    />

    <van-form @submit="onSubmit">

      <!--  一级分类  -->
      <van-field autocomplete="off"
                 name="category_one"
                 label="1级分类"
                 :rules="[{required: true, message: '未选择'}]"
                 required
      >
        <template #input>
          <van-radio-group
            v-model="category_one" direction="horizontal" style="margin-bottom: -10px"
            @change="category_two = ''"
          >
            <van-radio
              v-for="item in categoryArr"
              :name="item.id"
              :key="item.id"
              style="margin-bottom: 10px"
            >{{ item.title }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field autocomplete="off"
                 name="category_two"
                 label="2级分类"
                 :rules="[{required: true, message: '未选择'}]"
                 required
                 v-if="category_one"
      >
        <template #input>
          <van-radio-group
            v-model="category_two" direction="horizontal" style="margin-bottom: -10px"
            @change="category_three = ''"
          >
            <van-radio
              v-for="item in leve_two[category_one]"
              :name="item.id"
              :key="item.id"
              style="margin-bottom: 10px"
            >{{ item.title }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field autocomplete="off"
                 name="category_three"
                 label="3级分类"
                 :rules="[{required: true, message: '未选择'}]"
                 required
                 v-if="category_two && ['200001', ].includes(category_two)"
      >
        <template #input>
          <van-radio-group v-model="category_three" direction="horizontal" style="margin-bottom: -10px">
            <van-radio
              v-for="item in leve_three[category_two]"
              :name="item.id"
              :key="item.id"
              style="margin-bottom: 10px"
            >{{ item.title }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>

<!--      <van-field autocomplete="off"
                 name="category_four"
                 label="4级分类"
                 :rules="[{required: true, message: '未选择'}]"
                 required
                 v-if="category_three"
      >
        <template #input>
          <van-radio-group v-model="category_four" direction="horizontal" style="margin-bottom: -10px">
            <van-radio
              v-for="item in categoryArr"
              :name="item.id"
              :key="item.id"
              style="margin-bottom: 10px"
            >{{ item.title }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>-->


      <van-field
        autocomplete="off"
        v-model="videoUrl"
        name="videoUrl"
        label="视频或教程的网址"
        placeholder="请输入"
        type="textarea"
        required
        rows="3"
        autosize
        :rules="[{required: true, message: '未输入'}]"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>

const categoryArr = [
  {
    id: '100',
    title: '项目介绍',
  },
  {
    id: '200',
    title: '软件教程',
  },
  {
    id: '300',
    title: '推广教程',
  },
];

/*

id 命名规范  参考省、市、区

例如：（三位为一级）
  省  为  100
  a市  为  100001
  a市的区  为  100001001


*/


export default {
  name: "helperUpload",
  data() {

    const option1 = [
      { title: '项目介绍（完整版）', id: '100001' },
      { title: '项目介绍（上）', id: '100002' },
      { title: '项目介绍（中）', id: '100003' },
      { title: '项目介绍（下）', id: '100004' },
    ];

    const option2 = [
      { title: '找工作集合', id: '200001' },
      { title: '人事集合', id: '200002' },
      { title: '股份集合', id: '200003' },
      { title: '推广集合', id: '200004' },


      { title: '签单集合', id: '200005' },
      { title: '招聘集合', id: '200006' },
      { title: '客服集合', id: '200007' },

      { title: '接待集合', id: '200008' },
      { title: '驻厂集合', id: '200009' },
      { title: '宿管集合', id: '200010' },
      { title: '会计集合', id: '200011' },
      { title: '财务集合', id: '200012' },
      { title: '其他集合', id: '200999' },
    ];
    const option3 = [
      { title: '线上推广集合', id: '300001' },
      { title: '线下推广集合', id: '300002' },
      { title: '推广个人集合', id: '300003' },
      { title: '推广企业集合', id: '300004' },
    ];








    const option4 = [
      { title: '浏览', id: '200001001' },
      { title: '注册', id: '200001002' },
      { title: '登录', id: '200001003' },
      { title: '城市', id: '200001004' },
      { title: '个人认证', id: '200001005' },
      { title: '企业认证', id: '200001006' },
    ];



    return {
      categoryArr,
      category_one: '',
      category_two: '',
      category_three: '',
      category_four: '',

      videoUrl: '',

      leve_two: {
        100: option1,
        200: option2,
        300: option3,
      },

      leve_three: {
        200001: option4,
      },


    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
  },

};
</script>

<style scoped>

</style>
